<div class="kuler-filter">
    <div class="box kuler-module">
        <?php if ($show_title) { ?>
            <div class="box-heading"><span><?php echo $module_title ?></span></div>
        <?php } ?>
        <div class="box-content">
            <?php if ($setting['category']) { ?>
                <div>
                    <p><?php echo $__['text_category']; ?></p>
                    <select class="kulerfilter-select" onchange="return Kuler.filter(this, 'category');">
                        <option value=""><?php echo $__['text_all']; ?></option>
                        <?php foreach ($categories as $category) { ?>
                            <option
                                value="<?php echo $category['category_id']; ?>"<?php echo $category['category_id'] == $category_path ? ' selected="selected"' : '' ?>><?php echo $category['name']; ?></option>
                            <?php if ($category['children']) { ?>
                                <?php foreach ($category['children'] as $child) { ?>
                                    <option
                                        value="<?php echo $category['category_id'], '_', $child['category_id']; ?>"<?php echo ($category['category_id'] . '_' . $child['category_id']) == $category_path ? ' selected="selected"' : '' ?>>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $child['name']; ?></option>
                                <?php } ?>
                            <?php } ?>
                        <?php } ?>
                    </select>
                </div>
            <?php } ?>
            <?php if ($setting['manufacture']) { ?>
                <div>
                    <p><?php echo $__['text_manufacture']; ?></p>
                    <select class="kulerfilter-select" onchange="return Kuler.filter(this, 'brand');">
                        <option value=""><?php echo $__['text_all']; ?></option>
                        <?php foreach ($manufacturers as $item) { ?>
                            <option
                                value="<?php echo $item['manufacturer_id']; ?>"<?php echo $item['manufacturer_id'] == $brand ? ' selected="selected"' : '' ?>><?php echo $item['name']; ?></option>
                        <?php } ?>
                    </select>
                </div>
            <?php } ?>
            <?php if ($setting['attribute'] && count($attributes)) { ?>
            <div>
                <p><?php echo $__['text_filter_by_attributes']; ?></p>
                <?php foreach ($attributes as $attr_group_index => $item) { ?>
                    <?php $count = count($item['attributes']) ?>
                    <?php $count = $count > 5 ? 5 : ($count < 2 ? 2 : $count) ?>
                    <div>
                        <p><?php echo $item['name'] ?> (<?php echo $item['total_product']; ?>)</p>

                        <?php if (!isset($setting['filter_type']) || $setting['filter_type'] == 'select') { ?>
                            <select class="kulerfilter-select attr-filter"
                                onchange="return Kuler.filter(this, 'attr_<?php echo $item['attribute_id'] ?>');">
                                <option value=""><?php echo $__['text_all']; ?></option>
                                <?php foreach ($item['attributes'] as $attr_index => $value) { ?>
                                    <option
                                        value="<?php echo $value['text']; ?>"<?php if (isset($attrs[$item['attribute_id']]) && in_array($value['text'], $attrs[$item['attribute_id']])) echo ' selected="selected"'; ?>
                                        data-index="<?php echo $attr_index; ?>"><?php echo $value['text']; ?>
                                        (<?php echo $value['total_product']; ?>)
                                    </option>
                                <?php } ?>
                            </select>
                        <?php } else if ($setting['filter_type'] == 'option') { ?>
                            <?php foreach ($item['attributes'] as $attr_index => $value) { ?>
                                <label for="attr_<?php echo $item['attribute_id'] ?>_<?php echo $attr_index; ?>">
                                    <input id="attr_<?php echo $item['attribute_id'] ?>_<?php echo $attr_index; ?>"
                                        type="checkbox" value="<?php echo $value['text']; ?>"
                                        onclick="return Kuler.filter(this, 'attr_<?php echo $item['attribute_id'] ?>_<?php echo $attr_index; ?>')"<?php if (isset($attrs[$item['attribute_id']]) && in_array($value['text'], $attrs[$item['attribute_id']])) echo ' checked="checked"'; ?> />
                                    &nbsp;&nbsp;<?php echo $value['text']; ?>
                                    (<?php echo $value['total_product']; ?>)
                                </label><br/>
                            <?php } ?>
                        <?php } ?>
                    </div>
                <?php } ?>
                </div>
                <?php } ?>

                <?php if ($setting['option'] && count($options)) { ?>
                    <div>
                        <p><?php echo $__['text_filter_by_options']; ?></p>
                        <?php foreach ($options as $option_id => $option) { ?>
                            <div>
                                <p><?php echo $option['name']; ?> (<?php echo $option['total_product']; ?>)</p>

                                <?php if ($setting['option_filter_type'] == 'select') { ?>
                                    <select class="kuler-filter-select attr-filter"
                                        onchange="return Kuler.filter(this, '<?php echo $option['type'] == 'single' ? 'option1' : 'option2' ?>_<?php echo $option_id; ?>');">
                                        <option value=""><?php echo $__['text_all']; ?></option>
                                        <?php foreach ($option['values'] as $value_index => $value) { ?>
                                            <?php if ($option['type'] == 'single') { ?>
                                                <option
                                                    data-index="<?php echo $value_index; ?>"
                                                    value="<?php echo $value['value1']; ?>"<?php if (isset($select_option1[$option_id]) && in_array($value['value1'], $select_option1[$option_id])) echo ' selected="selected"'; ?>><?php echo $value['value1']; ?>
                                                    (<?php echo $value['total_product']; ?>)
                                                </option>
                                            <?php } else { ?>
                                                <option
                                                    data-index="<?php echo $value_index; ?>"
                                                    value="<?php echo $value['option_value_id']; ?>"<?php if (isset($select_option2[$option_id]) && in_array($value['option_value_id'], $select_option2[$option_id])) echo ' selected="selected"'; ?>><?php echo $value['value2']; ?>
                                                    (<?php echo $value['total_product']; ?>)
                                                </option>
                                            <?php } ?>
                                        <?php } ?>
                                    </select>
                                <?php } else { ?>
                                    <?php foreach ($option['values'] as $value_index => $value) { ?>
                                        <?php if ($option['type'] == 'single') { ?>
                                            <label for="option1_<?php echo $option_id; ?>_<?php echo $value_index; ?>">
                                                <input
                                                    id="option1_<?php echo $option_id; ?>_<?php echo $value_index; ?>"
                                                    type="checkbox" value="<?php echo $value['value1']; ?>"
                                                    onclick="return Kuler.filter(this, 'option1_<?php echo $option_id; ?>_<?php echo $value_index; ?>')"<?php if (isset($select_option1[$option_id]) && in_array($value['value1'], $select_option1[$option_id])) echo ' checked="checked"'; ?> />
                                                &nbsp;&nbsp;<?php echo $value['value1']; ?>
                                                (<?php echo $value['total_product']; ?>)
                                            </label><br/>
                                        <?php } else { ?>
                                            <label for="option2_<?php echo $option_id; ?>_<?php echo $value_index; ?>">
                                                <input
                                                    id="option2_<?php echo $option_id; ?>_<?php echo $value_index; ?>"
                                                    type="checkbox" value="<?php echo $value['option_value_id']; ?>"
                                                    onclick="return Kuler.filter(this, 'option2_<?php echo $option_id; ?>_<?php echo $value_index; ?>')"<?php if (isset($select_option2[$option_id]) && in_array($value['option_value_id'], $select_option2[$option_id])) echo ' checked="checked"'; ?> />
                                                &nbsp;&nbsp;<?php echo $value['value2']; ?>
                                                (<?php echo $value['total_product']; ?>)
                                            </label><br/>
                                        <?php } ?>
                                    <?php } ?>
                                <?php } ?>
                            </div>
                        <?php } ?>
                    </div>
                <?php } ?>

                <?php if (isset($setting['price_filter']) && $setting['price_filter']) { ?>
                    <div>
                        <p>Price (<?php echo $setting['currency']; ?>) <span
                                class="price-range"><?php echo "$price_min - $price_max"; ?></span></p>

                        <div class="price-slide"></div>
                        <input type="hidden" class="price-min" value="<?php echo $price_min; ?>"
                            onchange="return Kuler.filter(this, 'price_min');"/>
                        <input type="hidden" class="price-max" value="<?php echo $price_max; ?>"
                            onchange="return Kuler.filter(this, 'price_max');"/>
                        <input type="hidden" class="currency-code" value="<?php echo $setting['currency']; ?>"/>
                    </div>
                <?php } ?>
                <div class="buttons">
                    <div class="right">
                        <button onclick="return Kuler.apply();" class="button">Search</button>
                    </div>
                </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    <?php if (isset($setting['price_filter']) && $setting['price_filter']) { ?>
    (function () {
        var settings = <?php echo json_encode($setting); ?>,
            priceMin = <?php echo $price_min; ?>,
            priceMax = <?php echo $price_max; ?>,
            $priceSlide = $('.price-slide'),
            $range = $('.price-range'),
            $priceMin = $('.price-min'),
            $priceMax = $('.price-max');

        $priceSlide.slider({
            animate: false,
            min: settings['price_min'],
            max: settings['price_max'],
            values: [priceMin, priceMax],
            range: true,
            slide: function (event, ui) {
                var rangeHtml = '';

                rangeHtml = ui.values[0] + ' - ' + ui.values[1];

                $priceMin.val(ui.values[0]);
                $priceMax.val(ui.values[1]);

                $range.html(rangeHtml);
            },
            change: function () {
                $priceMin.trigger('change');
                $priceMax.trigger('change');
            }
        });
    })();
    <?php } ?>

    var Kuler = {
        link: '<?php echo $link ?>',
        data: <?php echo $filter ? json_encode($filter) : '{}' ?>,
        filter: function(obj, key) {
            var $obj = $(obj),
                value = $obj.val();

            if ($obj.attr('type') == 'checkbox' && !$obj.prop('checked')) {
                value = false;
            } else if ($obj.hasClass('attr-filter')) {
                for (var i in this.data) {
                    if (i.indexOf(key) === 0) {
                        delete this.data[i];
                    }
                }

                key += '_' + $(obj[obj['selectedIndex']]).data('index') || '';
            }

            if (value) {
                this.data[key] = value;
            } else {
                delete this.data[key];
            }
        },
        build: function() {
            this.data['currency_code'] = $('.currency-code').val();

            var query = $.param(this.data);

            if(query.length > 3) {
                if(this.link.indexOf('?')) {
                    query = '&' + query;
                } else {
                    query = '?' + query;
                }
            }

            return query;
        },
        page: function(page) {
            if(page > 0) {
                this.data['page'] = page;
                location = this.link + this.build();
            }
        },
        apply: function() {
            location = this.link + this.build();
        }
    };
</script>